@value unit, border-color, border-radius, error-color, gray-color, link-hover-color, font-size from '../global/global.css';
@value animation-duration: 300ms;
@value animation-easing: ease-out;

.alert {
  position: relative;

  box-sizing: border-box;
  min-height: calc(unit * 5);
  margin: unit auto;
  padding: 0 calc(unit * 2);

  transition:
    transform animation-duration animation-easing,
    margin-top animation-duration animation-easing,
    opacity animation-duration animation-easing;
  white-space: nowrap;
  pointer-events: auto;

  border: solid 1px border-color;
  border-radius: border-radius;
  background: #fff;

  font-size: font-size;
  line-height: calc(unit * 5);
}

.alertInline {
  margin: unit;
}

.error {
  word-wrap: break-word;

  color: error-color;
}

.icon {
  display: inline-block;

  margin-right: unit;

  vertical-align: top;
}

.caption {
  display: inline-block;

  margin: 12px calc(unit * 4) 12px 0;

  vertical-align: middle;
  white-space: normal;

  line-height: 20px;
}

.badge {
  margin-left: unit;

  vertical-align: baseline;
}

.loader {
  top: 3px;

  margin-right: unit;
}

.close {
  position: absolute;
  top: 2px;
  right: 0;

  margin: calc(unit / 2);
  padding: unit;

  cursor: pointer;

  color: gray-color;
  border: none;
  background: transparent;

  font-size: 0;
  line-height: 0;

  &:hover,
  &:focus {
    color: link-hover-color;
  }
}

@keyframes show {
  from {
    transform: scale(0);

    opacity: 0;
  }

  to {
    transform: scale(1);

    opacity: 1;
  }
}

.animationOpen {
  animation-name: show;
  animation-duration: animation-duration;
}

.animationClosing {
  z-index: -1;

  transform: scale(0);

  opacity: 0;
}
